<template>
    <div class="body-inner">
        <h1 class="body-title">
            <i :class="$bodyTitle.icon"></i>
            <span>{{ $bodyTitle.description }}</span>
        </h1>
        <div class="line10"></div>
        <div class="body-main">
            <div class="md5">
                <div class="message">
                    <div class="btns">
                        <div class="btn" :class="{active:md5Times===1}" @click="setTimes(1)">
                            <div class="title">一次加密</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                        <div class="btn" :class="{active:md5Times===2}" @click="setTimes(2)">
                            <div class="title">两次加密</div>
                            <i class="icon appfont app-check"></i>
                        </div>
                    </div>
                    <textarea spellcheck="false" @input="generateMd5" v-model="message" placeholder="输入原文"></textarea>

                    <label :for="uploadFileId" class="dragArea" :class="{dropActive:dropActive}" ref="dragArea">
                        <div class="icon appfont app-img-upload"></div>
                        <div class="title">
                            <p>拖动文件到此处，或点击上传</p>
                            <p>计算结果同 PHP 版本的 md5_file() 函数</p>
                        </div>
                    </label>
                    <input :id="uploadFileId" type="file" :accept="accept" @change="upload2FileMd5">

                </div>
                <div class="results">
                    <div class="row" @click="$copy(md5Lower32)">
                        <div class="title">32位大写</div>
                        <tips class="tips" :tip="`点击复制`" :direction="'top'">
                            <input type="text" readonly v-model="md5Lower32" placeholder="请输入左侧原文">
                            <i class="copy appfont app-copy"></i>
                        </tips>
                    </div>
                    <div class="row" @click="$copy(md5Upper32)">
                        <div class="title">32位小写</div>
                        <tips class="tips" :tip="`点击复制`" :direction="'top'">
                            <input type="text" readonly v-model="md5Upper32" placeholder="请输入左侧原文">
                            <i class="copy appfont app-copy"></i>
                        </tips>
                    </div>
                    <div class="row" @click="$copy(md5Lower16)">
                        <div class="title">16位大写</div>
                        <tips class="tips" :tip="`点击复制`" :direction="'top'">
                            <input type="text" readonly v-model="md5Lower16" placeholder="请输入左侧原文">
                            <i class="copy appfont app-copy"></i>
                        </tips>
                    </div>
                    <div class="row" @click="$copy(md5Upper16)">
                        <div class="title">16位小写</div>
                        <tips class="tips" :tip="`点击复制`" :direction="'top'">
                            <input type="text" readonly v-model="md5Upper16" placeholder="请输入左侧原文">
                            <i class="copy appfont app-copy"></i>
                        </tips>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import md5 from 'js-md5';

export default {
    name: 'kit_md5',
    data () {
        return {
            dropActive  : false,
            uploadFileId: 'uploadFileId', /*文件上传域的id*/
            maxSize     : 10, /*单位M，最大上传尺寸*/
            accept      : '*',
            md5Times    : 1,
            message     : '',
            md5Lower32  : '',
            md5Upper32  : '',
            md5Lower16  : '',
            md5Upper16  : ''
        };
    },
    mounted () {
        /*利用拖动获取文件md5*/
        this.drop2FileMd5();
    },
    methods: {
        /*利用上传文件计算文件md5*/
        upload2FileMd5 (e) {
            /*清理文本框*/
            this.message = '';

            /*文件转md5*/
            this.file2md5(e.target.files);

            /*重置上传域*/
            let file   = document.getElementById(this.uploadFileId);
            file.value = '';
        },

        /**
         * 利用拖动获取文件md5
         */
        drop2FileMd5 () {
            /*清理文本框*/
            this.message = '';

            /*监听拖动*/
            const dragArea = this.$refs.dragArea;
            dragArea.addEventListener('drop', (e) => {
                this.dropActive = false;
                e.stopPropagation();
                e.preventDefault();

                /*文件转md5*/
                this.file2md5(e.dataTransfer.files);
            }, false);

            dragArea.addEventListener('dragleave', (e) => {
                this.dropActive = false;
                e.stopPropagation();
                e.preventDefault();
            });

            dragArea.addEventListener('dragenter', (e) => {
                this.dropActive = true;
                e.stopPropagation();
                e.preventDefault();
            });

            dragArea.addEventListener('dragover', (e) => {
                this.dropActive = true;
                e.stopPropagation();
                e.preventDefault();
            });
        },

        /*读取文件转md5*/
        file2md5 (files) {
            /*获取base64编码*/
            try {
                if (files.length <= 0) {
                    return;
                }

                if (files.length > 1) {
                    throw new Error('仅支持上传1个文件');
                }

                if (files[0].size > (this.maxSize * 1024 * 1024)) {
                    throw new Error(`文件尺寸不能超过 ${this.maxSize}M`);
                }

                let reader = new FileReader();
                reader.readAsArrayBuffer(files[0]);
                reader.onload = () => {
                    this.message = reader.result;
                    this.generateMd5();
                };
            }
            catch (e) {
                this.$alert(e.message);
            }
        },

        /*设置加密次数*/
        setTimes (times) {
            this.md5Times = times;
            this.generateMd5();
        },

        /*生成md5*/
        generateMd5 () {
            this.md5Lower32 = '';
            this.md5Upper32 = '';
            this.md5Lower16 = '';
            this.md5Upper16 = '';

            if (!this.message) return;

            /*一次加密*/
            this.md5Lower32 = md5(this.message).toString();

            /*两次加密*/
            if (this.md5Times === 2) {
                this.md5Lower32 = md5(this.md5Lower32).toString();
            }

            /*更新其他密文*/
            this.md5Upper32 = this.md5Lower32.toUpperCase();
            this.md5Lower16 = this.md5Lower32.substring(8, 24);
            this.md5Upper16 = this.md5Lower16.toUpperCase();
        }
    }
};
</script>

<style scoped lang="less">
@dragAreaHeight : 175px;
.md5 {
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : calc(~"100vh - 125px");

    .btns {
        display       : flex;
        margin-bottom : 10px;

        .btn {
            height                : 40px;
            background            : rgba(255, 255, 255, 0.1);
            flex                  : auto;
            margin-right          : 10px;
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
            display               : flex;
            align-items           : center;
            cursor                : pointer;

            &.active {
                background : fade(@green, 20%);

                .icon {
                    color : @green;
                }
            }

            &:last-child {
                margin-right : 0;
            }

            .icon {
                height          : 40px;
                width           : 40px;
                display         : flex;
                align-items     : center;
                justify-content : center;
                flex-grow       : 0;
                flex-shrink     : 0;
                color           : #888;
            }

            .title {
                flex-grow   : 1;
                flex-shrink : 1;
                margin-left : 20px;
            }
        }
    }

    .message {
        flex         : 1;
        margin-right : 20px;
        height       : 100%;
        position     : relative;

        textarea {
            width                 : 100%;
            height                : calc(~"100vh - 125px - 50px");
            border                : 0;
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
            padding               : 15px;
            font-size             : 16px;
            padding-bottom        : @dragAreaHeight + 30px;
        }

        .dragArea {
            cursor                : pointer;
            position              : absolute;
            z-index               : 100;
            background            : rgba(238, 238, 238, 0.9);
            border                : 2px dashed #aaa;
            color                 : #000;
            height                : @dragAreaHeight;
            -webkit-border-radius : 6px;
            -moz-border-radius    : 6px;
            border-radius         : 6px;
            bottom                : 15px;
            left                  : 15px;
            width                 : calc(~"100% - 30px");
            display               : flex;
            justify-content       : center;
            align-items           : center;
            flex-direction        : column;

            &.dropActive {
                background : fade(@blue, 80%);
                border     : 2px dashed @blue;

                .icon {
                    color : #fff;
                }

                .title {
                    color : #fff;
                }
            }

            .icon {
                font-size : 50px;
                color     : #999;
            }

            .title {
                margin-top : 10px;
                color      : #999;
                text-align : center;
            }
        }

        [type=file] {
            display : none;
        }
    }

    .results {
        height         : 100%;
        flex           : 1;
        display        : flex;
        flex-direction : column;

        .row {
            flex                  : 1;
            width                 : 100%;
            background            : #f50;
            margin-bottom         : 10px;
            background            : #333;
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
            position              : relative;

            .copy {
                position        : absolute;
                height          : 50px;
                width           : 50px;
                top             : 0;
                right           : 0;
                display         : flex;
                align-items     : center;
                justify-content : center;
                z-index         : 100;
                color           : rgba(255, 255, 255, 0.5);
                cursor          : pointer;

                &:hover {
                    color : @blue;
                }
            }

            &:last-child {
                margin-bottom : 0;
            }

            .title {
                text-align  : center;
                height      : 40px;
                line-height : 40px;
                color       : #bbb;
                cursor      : pointer;
            }

            input {
                font-size   : 18px;
                width       : 100%;
                border      : 0;
                color       : #fff;
                text-align  : center;
                background  : none;
                height      : calc(~"(100vh - 125px - 30px) / 4 - 60px");
                font-weight : normal;
                cursor      : pointer;
            }
        }
    }
}
</style>
